import _ from 'lodash';
import {CSSProperties, useMemo} from 'react';
import {Dropdown, Link, Menu, Space, Tooltip} from 'acud';
import {LinkProps} from 'acud/lib/link/link';

import './index.less';

interface BaseLinkProps extends LinkProps {
    className?: string;
    name: string;
    tooltip?: string;
    disabled?: boolean;
    style?: CSSProperties;
    onLinkClick?: (e: any) => void;
}

interface TableOperateProps {
    options: BaseLinkProps[];
    maxShowItem?: number;
    data?: any;
    isTable?: boolean;
}

const TableOperate = (props: TableOperateProps) => {
    const {options, maxShowItem = 3, data = {}, isTable = true} = props;

    const renderMenu = useMemo(
        () => (
            <Menu>
                {_.map(options.slice(maxShowItem), (item: BaseLinkProps) => {
                    const {tooltip, name, disabled, onLinkClick} = item || {};
                    return (
                        <Menu.Item
                            key={name}
                            disabled={disabled}
                            onClick={() => !disabled && onLinkClick?.(data)}
                        >
                            {disabled ? (
                                <Tooltip title={tooltip}>{name}</Tooltip>
                            ) : (
                                <span>{name}</span>
                            )}
                        </Menu.Item>
                    );
                })}
            </Menu>
        ),
        [maxShowItem, options, data]
    );

    const renderLink = useMemo(
        () => {
            const Component = isTable ? 'a' : Link;
            return _.map(options.slice(0, maxShowItem), (item: BaseLinkProps) => {
                    const {name, disabled, tooltip, onLinkClick} = item || {};
                    return (
                        <Component
                            key={name}
                            disabled={disabled}
                            onClick={(e) => {
                                e.preventDefault();
                                if (!disabled && onLinkClick) {
                                    onLinkClick?.(data);
                                }
                            }}
                            {...item}
                        >
                            {disabled ? (
                                <Tooltip title={tooltip}>{name}</Tooltip>
                            ) : (
                                <span>{name}</span>
                            )}
                        </Component>
                    );
                }
            );
        },
        [maxShowItem, options, data, isTable]
    );

    return (
        <Space>
            {options.length > 0 ? renderLink : '-'}
            {options.length > 0 && options.length > maxShowItem && (
                <Link>
                    <Dropdown
                        label={<Link>更多</Link>}
                        labelIcon
                        overlay={renderMenu}
                    />
                </Link>
            )}
        </Space>
    );
};

export default TableOperate;
